<template>
  <div class="top-right-btn" :style="style">
    <el-row :gutter="10">
      <el-col :span="12">
        <el-dropdown @command="handleCommand">
          <el-button size="mini" icon="el-icon-suitcase" plain/>
          <el-dropdown-menu slot="dropdown">
            <!-- <el-dropdown-item icon="el-icon-zoom-in">数据筛选定位</el-dropdown-item> -->
            <el-dropdown-item icon="el-icon-view" command="toggleSearch" v-if="queryVisible === true">显示/隐藏搜索
            </el-dropdown-item>
            <el-dropdown-item icon="el-icon-download" :v-hasPermi="hasPermiExport" command="handleExport"
                              :disabled="exportdisabled" v-if="exportVisible === true">导出数据
            </el-dropdown-item>
            <el-dropdown-item icon="el-icon-document" :v-hasPermi="hasPermiUpload" command="handleUpload" v-if="uploadVisible === true">下载导入模板</el-dropdown-item>
            <!-- <el-dropdown-item icon="el-icon-document-delete" :disabled="exportdisabled">选择导出</el-dropdown-item> -->
            <el-dropdown-item icon="el-icon-s-operation" command="showColumn" v-if="tableVisible === true">表格显示设置</el-dropdown-item>
            <el-dropdown-item icon="el-icon-postcard" command="handleCardMode" v-if="cardModeVisible === true">切换卡片模式</el-dropdown-item>
            <el-dropdown-item icon="el-icon-tickets" command="handleTableMode" v-if="tableModeVisible === true">切换表格模式</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <!--        <el-col :span="12">-->
      <!--          <el-dropdown>-->
      <!--              <el-button size="mini" icon="el-icon-monitor" plain/>-->
      <!--              <el-dropdown-menu slot="dropdown">-->
      <!--                  <el-dropdown-item>-->
      <!--                      <el-checkbox v-model="checked">查询条件-->
      <!--                          <i class="el-icon-printer"></i>-->
      <!--                      </el-checkbox>-->
      <!--                  </el-dropdown-item>-->
      <!--                  <el-dropdown-item>-->
      <!--                      <el-checkbox v-model="checked">-->
      <!--                          表头富文本-->
      <!--                          <i class="el-icon-printer"></i>-->
      <!--                      </el-checkbox>-->
      <!--                  </el-dropdown-item>-->
      <!--                  <el-dropdown-item>-->
      <!--                      <el-checkbox v-model="checked">表尾合计-->
      <!--                          <i class="el-icon-printer"></i>-->
      <!--                      </el-checkbox>-->
      <!--                  </el-dropdown-item>-->
      <!--                  <el-dropdown-item>-->
      <!--                      <el-checkbox v-model="checked">列表表头-->
      <!--                          <i class="el-icon-printer"></i>-->
      <!--                      </el-checkbox>-->
      <!--                  </el-dropdown-item>-->
      <!--                  <el-dropdown-item>-->
      <!--                      <el-checkbox v-model="checked">列表数据-->
      <!--                          <i class="el-icon-printer"></i>-->
      <!--                      </el-checkbox>-->
      <!--                  </el-dropdown-item>-->
      <!--                  <el-dropdown-item>-->
      <!--                      <el-checkbox v-model="checked">列表分页栏-->
      <!--                          <i class="el-icon-printer"></i>-->
      <!--                      </el-checkbox>-->
      <!--                  </el-dropdown-item>-->
      <!--                  <el-dropdown-item>-->
      <!--                      <el-checkbox v-model="checked">列表富文本-->
      <!--                          <i class="el-icon-printer"></i>-->
      <!--                      </el-checkbox>-->
      <!--                  </el-dropdown-item>-->
      <!--              </el-dropdown-menu>-->
      <!--          </el-dropdown>-->
      <!--        </el-col>-->
    </el-row>
    <el-dialog :title="title" :visible.sync="open" append-to-body width="650px">
      <el-transfer
        :titles="['显示', '隐藏']"
        v-model="value"
        :data="columns"
        @change="dataChange"
      ></el-transfer>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "RightDropdown",
  data() {
    return {
      checked: false,
      // 显隐数据
      value: [],
      // 弹出层标题
      title: "显示/隐藏",
      // 是否显示弹出层
      open: false,
    };
  },
  props: {
    tableVisible:{
      type: Boolean,
      default: true,
    },
    showSearch: {
      type: Boolean,
      default: true,
    },
    columns: {
      type: Array,
    },
    search: {
      type: Boolean,
      default: true,
    },
    gutter: {
      type: Number,
      default: 10,
    },
    hasPermiExport: {
      type: Array,
    },
    hasPermiUpload: {
      type: Array
    },
    exportdisabled: {
      type: Boolean,
      default: false,
    },
    exportVisible: {
      type: Boolean,
      default: true,
    },
    uploadVisible: {
      type: Boolean,
      default: false,
    },
    queryVisible: {
      type: Boolean,
      default: true,
    },
    cardModeVisible: {
      type: Boolean,
      default: false,
    },
    tableModeVisible: {
      type: Boolean,
      default: false,
    }
  },
  computed: {
    style() {
      const ret = {};
      if (this.gutter) {
        ret.marginRight = `${this.gutter / 2}px`;
      }
      return ret;
    }
  },
  created() {
    // 显隐列初始默认隐藏列
    for (let item in this.columns) {
      if (this.columns[item].visible === false) {
        this.value.push(parseInt(item));
      }
    }
  },
  methods: {
    handleCommand(command) {
      if (command === 'handleExport') {
        this.handleExport()
      } else if (command === 'toggleSearch') {
        this.toggleSearch()
      } else if (command === 'showColumn') {
        this.showColumn()
      } else if (command === 'handleUpload') {
        this.handleUpload()
      }else if(command === 'handleCardMode') {
        this.handleCardMode()
      }else if(command === 'handleTableMode') {
        this.handleTableMode()
      }
    },
    // 导出
    handleExport() {
      this.$emit("export")
    },
    // 下载模板
    handleUpload() {
      this.$emit("upload")
    },
    // 搜索
    toggleSearch() {
      this.$emit("update:showSearch", !this.showSearch);
    },
    // 刷新
    refresh() {
      this.$emit("queryTable");
    },
    // 右侧列表元素变化
    dataChange(data) {
      for (let item in this.columns) {
        const key = this.columns[item].key;
        this.columns[item].visible = !data.includes(key);
      }
    },
    // 打开显隐列dialog
    showColumn() {
      this.open = true;
    },
    // 切换卡片模式
    handleCardMode() {
      this.$emit("changeCardMode");
    },
    // 切换表格模式
    handleTableMode() {
      this.$emit("changeTableMode");
    }
  },
};
</script>
<style lang="scss" scoped>
// .el-button.is-active, .el-button:active {
//   border-color: #67C23A !important;
//   color: #67C23A !important;
// }
// .el-button:focus, .el-button:hover {
//   border-color: #67C23A !important;
//   color: #67C23A !important;
// }
</style>
